<template>
    <div class="forgetform">
        <el-form :label-position='labelposition' ref="Forgetform" :model="Forgetform" label-width="80px">
            <el-form-item label="手机号" prop='phone'>
                <el-input v-model="Forgetform.phone"></el-input>
            </el-form-item>

            <el-form-item label="图片验证码">
                <div class="imgCodeArea" prop='imgCode'>
                    <el-input v-model="Forgetform.imgCode"></el-input>
                    <div class="imgCode" @click="api_getimg">
                        <img class="img" :src="imgPath" alt="">
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="手机验证码">
                <div class="imgCodeArea" prop='phoneCode'>
                    <el-input v-model="Forgetform.phoneCode"></el-input>
                    <div class="imgCode cur" @click="e_send">
                        <div class="smsBtn" v-text="smsBtnText" />
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="新登录密码" prop='newPassword'>
                <el-input type="password" v-model="Forgetform.newPassword"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="e_forget">立即找回</el-button>
            </el-form-item>
        </el-form>
		<hb-dialog v-if="msgback !== ''" @clk="e_closeDialog" class="dialog">
            <h3 class="hmsg" v-text="msgback"></h3>
        </hb-dialog>
    </div>
</template>

<script>
import {vpost, vlink} from '@api'
export default {
	name: 'forgetform',
	data() {
		return {
			labelposition: 'top',
			imgPath: '', //图片验证码
			Forgetform: {
				phone: '', //手机号
				imgCode: '', //图片验证码
				phoneCode: '', //短信验证码
				newPassword: '', //新登录密码
			},
			msgback: '',
			smsBtnText: '发送验证码',
			sendTimer: null,
		}
	},

	components: {},

	computed: {},

	methods: {
		onSubmit() {
			console.log('submit!')
		},
		api_getimg() {
			this.imgPath = ''
			setTimeout(() => {
				let r = (Math.random() * 100) | 0
				this.imgPath = vlink.checkCode.signup.img + r
			}, 10)
		},
		// ==================================================发送短信验证码👇=======================================================//
		// 发送前检查
		beforSendCheck(cb) {
			let se = {
				type: 9,
				phone: this.Forgetform.phone,
				email: '',
				vcode: this.Forgetform.imgCode,
			}
			if (se.phone == '') {
				this.$alert('请输入手机号')
				return
			}
			if (se.vcode == '') {
				this.$alert('请输入图片验证码')
				return
			}
			cb(se)
		},
		// 发送验证码倒计时
		doTimer() {
			this.smsBtnText = '60s'
			var counter = 59
			this.sendTimer = setInterval(() => {
				if (counter == 0) {
					this.smsBtnText = '发送验证码'
					clearInterval(this.sendTimer)
				} else {
					this.smsBtnText = counter + 's'
					counter--
				}
			}, 1000)
		},
		// 发送验证码
		e_send() {
			if (this.smsBtnText == '发送验证码') {
				this.beforSendCheck(se => {
					this.doTimer()
					vpost(vlink.checkCode.signup.phone, se).then(re => {
						if (re.code == 0) {
							this.msgback = re.msg
						} else {
							this.msgback = re.msg
							clearInterval(this.sendTimer)
						}
						this.closeMsg()
					})
				})
			}
		},
		// ==================================================发送短信验证码👆=======================================================//
		// ==================================================立即找回密码👇=========================================================//
		// 找回前检查
		beforeForget(cb) {
			let forgetdata = {
				phone: this.Forgetform.phone,
				loginName: this.Forgetform.phone,
				phoneCode: this.Forgetform.phoneCode,
				newPassword: this.Forgetform.newPassword,
			}
			if (forgetdata.phone == '') {
				this.msgback = '请输入手机号'
				this.closeMsg()
				return
			}
			if (forgetdata.phoneCode == '') {
				this.msgback = '请输入短信验证码'
				this.closeMsg()
				return
			}
			if (forgetdata.newPassword == '') {
				this.msgback = '请输入新的登录密码'
				this.closeMsg()
				return
			}
			cb(forgetdata)
		},
		closeMsg() {
			setTimeout(() => {
				this.msgback = ''
			}, 1300)
		},
		// 立即找回
		e_forget() {
			this.beforeForget(forgetdata => {
				vpost(vlink.sign.forget, forgetdata).then(re => {
					this.msgback = re.msg

					if (re.code == 200) {
						setTimeout(() => {
							this.msgback = ''
							this.$router.push('/signin')
						}, 1300)
					} else {
						this.closeMsg()
					}
				})
			})
		},
		e_closeDialog() {
			this.msgback = ''
		},
		// ==================================================立即找回密码👆=========================================================//
	},
	mounted() {
		this.api_getimg()
	},
}
</script>
<style scoped>
.imgCodeArea {
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
}
.imgCode {
	width: 91px;
	height: 40px;
	margin-left: 10px;
	border-radius: 4px;
}
.img {
	width: 91px;
	height: 40px;
	border-radius: 4px;
}
.smsBtn {
	width: 91px;
	height: 40px;
	border-radius: 4px;
	background-color: #262c46;
	color: #61688a;
	border: 1px solid #61688a;
	text-align: center;
}
.smsBtn:hover {
	background-color: #181b2a;
}
.hmsg {
	padding: 0 20px;
}
.dialog {
	color: var(--clr0);
}
</style>

